<template>
  <div class="header">
    <div class="aaa">
      <span>个人中心</span>
    </div>
    <div class="shade">
      <router-link to="shezhi">
        <div class="head_img">
          <div class="a_img">
            <img class="image_13" referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssx3i9jwo2h3673t2hasc9lgv9h0wpal550083fb-d3ff-4356-9a2d-09fd19dac018" />
          </div>
        </div>
      </router-link>
      <span class="head_imgname">{{ $store.state.duan.name }}</span>
      <div class="zhi">
        <router-link to="beike">
          <div class="fanhui">
            <h2 :v-model="mi">{{ mi }}</h2>
            <span>贝壳</span>
          </div>
        </router-link>
        <router-link to="xingzhi">
          <div class="fanhui">
            <h2>{{ $store.state.duan.xing }}</h2>
            <span>星值商城</span>
          </div>
        </router-link>
      </div>

    </div>
  </div>
  <div class="nav">
    <ul class="nav_zhinan">
      <li>
        <img
          src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/347c23c2524f49da9805c2d7ed24e871_mergeImage.png"
          alt="">
        <h3>我的订单</h3>
      </li>
      <li>
        <img class="image_2" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssxxbvd12wsahra21o94045a1yze0fe7454db22a6-9c3b-46e9-9be4-55585a7cb758" />
        <h3>我的历史</h3>
      </li>
      <li>
        <img class="image_3" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psf76ji8zzgqnyjccl50yiv920bm82u4rqea19ad44f-ca4f-49b8-b028-229c7242d43c" />
        <h3>我的消息</h3>
      </li>
      <li @click="shouhuo">
        <img class="image_4" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfo6fuyumwb5tzdmxbwm65o44g2j8ds1r2d12ccd2-b80b-4d04-a2fe-3ac44728b4f1" />
        <h3>收货地址</h3>
      </li>
      <li>
        <img class="image_5" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnbm25qz5ekpj3v6qqqjrqbv9ii65y3lwc6ae5a89-42b3-4b86-8cad-eadaf974efe5" />
        <h3>客服中心</h3>
      </li>
      <li @click="tousu">
        <img class="image_6" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbo1svivs3lrtw6gxozfqcx7dd7afhh596137ae01-ddfa-4a18-9acd-1ac193b2107d" />
        <h3>投诉建议</h3>
      </li>
      <li>
        <img class="image_7" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps71rk9f6z4rdgucaeawb27t5vdfsxydzzu4e8702cf-31c3-40c6-8481-22d9c39c9b83" />
        <h3>物流通知</h3>
      </li>
      <li>
        <img class="image_8" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pstnsxjfe33mkjxweug0n93habidk5ccegcf463547a-c922-48e7-b242-c1c6fa4691f2" />
        <h3>赠送记录</h3>
      </li>
      <li @click="hongbao">
        <img class="image_9" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2abnkc5e6jkhpsmtx9dx9b0wbz4z9fxhwaef15efc1-322f-421b-999a-e2e0fa852bbd" />
        <h3>红包兑换</h3>
      </li>
      <li @click="yaoqing">
        <img class="image_10" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psb7u67ulltetqbxgsy2qwbr546404rys6c3d5b5e-233b-46bc-9d07-3ba3974e7177" />
        <h3>填写邀请码</h3>
      </li>
      <li @click="guanyu">
        <img class="image_11" referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2dt8ranug6supa0m4jfmv1zpeo17v67x5016fe1b-803d-4f3d-b614-cea957571301" />
        <h3>产品关于</h3>
      </li>
    </ul>
    <div class="tu">
      <img class="image_12" referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psym9rdea2y688inz46k7leoy0o1zrzan6mfb1cced8-115e-40dd-adf4-3cc483b3915a" />
    </div>
  </div>
</template>

<script>
import api from "@/api"
export default {
  data() {
    return {
      mi: '',

    }
  },
  created() {
    this.cha();
  },
  methods: {
    guanyu() {
      this.$router.push({ name: 'guanyu' });
    },
    shouhuo() {
      this.$router.push({ name: 'shouhuo' });
    },
    yaoqing() {
      this.$router.push({ name: 'yaoqing' });
    },
    tousu() {
      this.$router.push({ name: 'tousu' });
    },
    hongbao() {
      this.$router.push({ name: 'hongbao' });
    },
    async cha() {
      let id = this.$store.state.bian.data;
      // console.log(id);
      let { data } = await api.chaxun(id);
      // console.log(data);
      this.mi = data.data;
      // this.$store.commit('duan/setNum', this.num);
    },

  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 30%;
  background-color: rgb(255, 255, 255, 100%);
  line-height: 10px;
  font-size: 20px;
  display: flex;
  text-indent: 10px;
  position: relative;
  /* padding-top: 10px; */
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pswo9ck5dr8wqdg79lpb8mib20ea73kwjl5ef26ba5-3831-4c8c-bb6f-157e977b016c) -5px 0px no-repeat;
  background-size: 100%;
}

/* .set_img {
  width: 23px;
  height: 23px;

  left: 6.1rem;
} */

.aaa {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgb(255, 255, 255, 0.1);
}

.fanhui {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-align: center;

}

h2 {
  font-size: 20px;
}

.c {
  font-size: 20px;
  font-weight: 400;
  color: black;
}

/* 遮罩 */
.shade {
  width: 90%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 30%;
  left: 5%;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;


}

.head_img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a_img {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
}



.money {
  font-size: 16px;
}

/* .head_img>img {
  width: 100%;
  height: 100%;
} */
.head_imgname {
  /* display: block; */
  width: 100%;
  height: 15%;
  text-indent: -4%;
  font: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zhi {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}


li>img {
  width: 40%;
  height: 100%;
}

.integral {
  left: 200px;
}

.nav {
  width: 100%;
  height: 60%;
  position: relative;
  top: 10%;
}

.set_img {
  color: black;
}

.nav_zhinan {
  width: 90%;
  height: 45%;
  position: absolute;
  left: 20px;
  /* border-radius: 7px 7px 0 0;
  box-shadow: 0 -5px 0 0; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* border-left: 1px solid #999;
  border-right: 1px solid #999; */
  border: 1px solid #000;
  border-radius: 10px;
}

h3 {

  font-size: 0.27333rem;
}


.nav_zhinan>li {
  text-align: center;
  width: 20%;
  height: 15%;
}

.tu {
  width: 90%;
  height: 30%;
  left: 20px;
  background-color: bisque;
  position: absolute;
  top: 50%;
}

.tu>img {
  width: 100%;
  height: 100%;

}
</style>
